<template>
  <el-drawer
    :title="titleMap[mode]"
    v-model="visible"
    :size="1224"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-tabs type="border-card">
          <el-form
            ref="dialogForm"
            :model="form"
            :rules="rules"
            size="small"
            label-width="120px"
          >
            <el-tab-pane label="基础信息">
              <el-form-item label="表格分组" prop="category_id">
                <sk-select-group
                  v-model="form.category_id"
                  :list="category"
                  :selectall="true"
                  :showfield="'meta.title'"
                />
              </el-form-item>

              <el-form-item label="表格名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入中文描述标题"></el-input>
              </el-form-item>

              <el-form-item label="标识" prop="code">
                <el-input v-model="form.code" placeholder="请输入唯一标识"></el-input>
              </el-form-item>
              <el-form-item label="导入模版" prop="excelname">
                <el-input v-model="form.excelname" placeholder="模版文件名"></el-input>
              </el-form-item>
              <el-form-item :inline-message="true" label="是否显示合计">
                <el-checkbox v-model="form.showFooter"></el-checkbox>
              </el-form-item>

              <el-form-item :inline-message="true" label="合计行数">
                <el-input-number v-model="form.footerRowCount"></el-input-number>
              </el-form-item>
              <el-form-item :inline-message="true" label="显示数字行">
                <el-checkbox v-model="form.showColumnNum"></el-checkbox>
              </el-form-item>
              <el-form-item :inline-message="true" label="显示多选行">
                <el-checkbox v-model="form.showCheckBox"></el-checkbox>
              </el-form-item>
              <el-form-item :inline-message="true" label="单元格溢出省略号">
                <el-checkbox v-model="form.showOverflow"></el-checkbox>
              </el-form-item>
              <el-form-item :inline-message="true" label="列数据筛选">
                <el-checkbox v-model="form.just_fetch_field"></el-checkbox>
              </el-form-item>
              <el-form-item :inline-message="true" label="是否树形菜单">
                <el-checkbox v-model="form.tree"></el-checkbox>
              </el-form-item>
              <el-form-item :inline-message="true" label="树形字段">
                <el-input v-model="form.treefield"></el-input>
              </el-form-item>
              <el-form-item :inline-message="true" label="每页显示">
                <el-input-number v-model="form.pageSize"></el-input-number>
              </el-form-item>
              <el-form-item :inline-message="true" label="分页">
                <el-input
                  v-model="form.pageSizes"
                  placeholder="5, 10, 15, 20, 50, 100, 200, 500, 1000"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="工具栏">
              <sc-title title="左侧自定义"></sc-title>
              <sc-form-table
                v-model="form.buttons"
                :addTemplate="buttonTpl"
                drag-sort
                placeholder="暂无数据"
              >
                <el-table-column prop="code" label="代码" width="70" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.code" placeholder="代码"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="parent_id"
                  label="父按钮"
                  width="100"
                  align="center"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.parent_id" placeholder="请选择">
                      <el-option
                        v-for="item in parentButtons"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="70" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.name" placeholder="名称"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="func" label="函数" width="70" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.func" placeholder="函数"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="icon" label="图标" width="70" align="center">
                  <template #default="scope">
                    <sk-icon-select
                      v-model="scope.row.icon"
                      :color="scope.row.color"
                    ></sk-icon-select>
                  </template>
                </el-table-column>
                <el-table-column prop="color" label="颜色" width="70" align="center">
                  <template #default="scope">
                    <el-color-picker
                      v-model="scope.row.color"
                      :predefine="predefineColors"
                    ></el-color-picker>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="70" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.status" placeholder="状态"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="model_id"
                  label="按钮可用"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <skDicSelect
                      v-model="scope.row.model_id"
                      :valueEqKey="false"
                      :code="'ButtonModel'"
                    >
                    </skDicSelect>
                  </template>
                </el-table-column>
                <el-table-column prop="isprint" label="打印" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.isprint"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="type_id"
                  label="按钮显示"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <skDicSelect
                      v-model="scope.row.type_id"
                      :valueEqKey="false"
                      :code="'ButtonShow'"
                    >
                    </skDicSelect>
                  </template>
                </el-table-column>
              </sc-form-table>

              <sc-title title="右侧系统自带"></sc-title>

              <el-checkbox v-model="form.search" label="搜索" size="large" />
              <el-checkbox v-model="form.refresh" label="重置" size="large" />
              <el-checkbox v-model="form.import" label="导入" size="large" />
              <el-checkbox v-model="form.export" label="导出" size="large" />
              <el-checkbox v-model="form.print" label="打印" size="large" />
              <el-checkbox v-model="form.zoom" label="全屏" size="large" />
              <el-checkbox v-model="form.setting" label="表设置" size="large" />
              <el-checkbox v-model="form.custom" label="自定义列设置" size="large" />
              <el-checkbox v-model="form.reload" label="刷新" size="large" />
            </el-tab-pane>
            <el-tab-pane label="搜索设置">
              <el-form-item label="标题宽" prop="titleWidth">
                <el-input v-model="form.titleWidth" placeholder="标题宽"></el-input>
              </el-form-item>
              <el-form-item label="对齐" prop="titleAlign">
                <el-input v-model="form.titleAlign" placeholder="right"></el-input>
              </el-form-item>

              <sc-form-table
                v-model="form.forms"
                :addTemplate="formTpl"
                drag-sort
                placeholder="暂无数据"
              >
                <el-table-column prop="title" label="名称" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.title"
                      placeholder="请输入名称"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="field" label="字段" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.field"
                      placeholder="请输入字段"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="格式" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.type"
                      placeholder="请输入名称"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="span" label="宽度" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.span"
                      placeholder="span请输入名称"
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="placeholder"
                  label="提示"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.placeholder"
                      placeholder="提示"
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="editfilter"
                  label="过滤"
                  width="100"
                  align="center"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.editfilter" placeholder="请选择">
                      <el-option
                        v-for="item in editfilter"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="editsource"
                  label="数据源"
                  width="100"
                  align="center"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.editsource" placeholder="请选择">
                      <el-option
                        v-for="item in sourcefilter"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="editkey"
                  label="数据内容"
                  width="100"
                  align="center"
                >
                  <template #default="scope">
                    <el-input v-model="scope.row.editkey" placeholder="内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="editkey" label="默认值" width="100" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.defaultvalue"
                      placeholder="默认值"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="multiple" label="多选" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.multiple"></el-checkbox>
                  </template>
                </el-table-column>
              </sc-form-table>
            </el-tab-pane>
            <el-tab-pane label="表格列">
              <sc-form-table
                v-model="form.columns"
                :addTemplate="addTemplate"
                drag-sort
                placeholder="暂无数据"
              >
                <el-table-column prop="title" label="名称" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.title"
                      placeholder="请输入名称"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="field" label="字段" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.field"
                      placeholder="请输入字段"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="格式" width="70" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.type"
                      placeholder="请输入名称"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="width" label="宽度" width="40" align="center">
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.width"
                      placeholder="请输入宽度"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="formatter"
                  label="格式化"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.formatter"
                      placeholder="格式化"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="placeholder"
                  label="提示"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.placeholder"
                      placeholder="提示"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="align" label="对齐" width="50" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.align" placeholder="对齐"></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="editfilter"
                  label="编辑/过滤"
                  width="60"
                  align="center"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.editfilter" placeholder="请选择">
                      <el-option
                        v-for="item in editfilter"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="editsource"
                  label="数据源"
                  width="60"
                  align="center"
                >
                  <template #default="scope">
                    <el-select v-model="scope.row.editsource" placeholder="请选择">
                      <el-option
                        v-for="item in sourcefilter"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="editkey"
                  label="数据内容"
                  width="70"
                  align="center"
                >
                  <template #default="scope">
                    <el-input v-model="scope.row.editkey" placeholder="内容"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="editValue"
                  label="默认值"
                  width="60"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.editValue"
                      placeholder="默认值"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="filterfield"
                  label="赋值"
                  width="60"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.filterfield"
                      placeholder="数据源赋值"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="filterparams"
                  label="筛选值"
                  width="60"
                  align="center"
                >
                  <template #default="scope">
                    <el-input
                      v-model="scope.row.filterparams"
                      placeholder="数据源筛选"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="editable" label="编辑" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.editable"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="fixed" label="固定" width="50" align="center">
                  <template #default="scope">
                    <el-select v-model="scope.row.fixed" placeholder="请选择">
                      <el-option
                        v-for="item in fixedfilter"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="multiple" label="多选" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.multiple"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="visible" label="可见" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.visible"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="sum" label="求和" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.sum"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="sortable" label="排序" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.sortable"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="filterable" label="筛选" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.filterable"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column prop="auth" label="权限" width="30" align="center">
                  <template #default="scope">
                    <el-checkbox v-model="scope.row.auth"></el-checkbox>
                  </template>
                </el-table-column>
              </sc-form-table>
            </el-tab-pane>
            <el-tab-pane label="打印报表">
              <sc-title title="报表明细"></sc-title>
              <sc-form-table
                v-model="form.reports"
                :addTemplate="reportTpl"
                drag-sort
                placeholder="暂无数据"
              >
                <el-table-column prop="name" label="名称" width="170" align="center">
                  <template #default="scope">
                    <el-input v-model="scope.row.name" placeholder="名称"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="地址" width="270" align="center">
                  <template #default="scope">
                    <span>
                      <RouterLink
                        target="_blank"
                        :to="{
                          name: 'designerReport',
                          query: { id: scope.row.id },
                        }"
                        >{{ scope.row.filename }}</RouterLink
                      >
                    </span>
                  </template>
                </el-table-column>
              </sc-form-table>
            </el-tab-pane>
          </el-form>
        </el-tabs>
      </el-main>

      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
import skSelectGroup from "@/components/skSelectGroup";
import skIconSelect from "@/components/skIconSelect";
import skDicSelect from "@/components/skDicSelect";

export default {
  components: { skSelectGroup, skIconSelect, skDicSelect },
  emits: ["success", "closed"],

  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      form: {
        reports: [],
      },
      categoryBuf: [],
      category: [],
      rules: {
        name: [
          {
            required: true,
            message: "请输入表格名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入唯一标识",
            trigger: "blur",
          },
        ],
        category_id: [{ required: true, message: "分组必选！", trigger: "blur" }],
      },
      editfilter: [
        { value: "", label: "空" },
        { value: "autocomplet", label: "自动" },
        { value: "autochoose", label: "弹窗" },
        { value: "input", label: "输入" },
        { value: "select", label: "选择" },
        { value: "checkbox", label: "多选" },
      ],
      sourcefilter: [
        { value: "", label: "空" },
        { value: "dic", label: "字典" },
        { value: "default", label: "自定义" },
      ],
      fixedfilter: [
        { value: "", label: "不" },
        { value: "left", label: "左" },
        { value: "right", label: "右" },
      ],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#67C23A",
        "#00ced1",
        "#409EFF",
        "#c71585",
      ],
      buttonTpl: {
        code: "",
        name: "",
        parent_id: 0,
        func: "",
        icon: null,
        status: "success",
        color: "",
        type_id: 1,
      },
      reportTpl: {
        id: "",
        name: "",
        filename: "",
      },

      formTpl: {
        field: "",
        title: "",
        span: "8",
        type: "text",
        placeholder: "",
        multiple: false,
        editfilter: "",
        editsource: "",
        editkey: "",
        sort: "",
      },
      addTemplate: {
        field: "",
        title: "",
        width: "100",
        visible: true,
        align: "center",
        type: "text",
        sum: false,
        formatter: "",
        placeholder: "",
        multiple: false,
        sortable: false,
        fixed: "",
      },
      visible: false,
      isSaveing: false,
      parentButtons: [{ id: 0, name: "无" }],
    };
  },
  mounted() {
    this.getCateGory();
  },
  watch: {
    "form.reports": {
      handler() {
        if (this.form.reports)
          this.form.reports.filter((v, k) => {
            if (v["id"] == "") {
              this.$API.system.tableReport.save
                .get({ table_id: this.form.id })
                .then(res => {
                  this.form.reports[k] = res.data;
                });
            }
          });
      },
      deep: true,
    },
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    async getCateGory(query = "") {
      this.categoryBuf = await this.$API.system.menu.list.get(query);
      this.category = this.categoryBuf.data.filter(item => {
        return item.name.toLowerCase().includes(query.toLowerCase());
      });
    },

    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.system.tableconfig.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },
    //表单注入数据
    async setData(data) {
      this.loading = true;
      const params = {
        id: data.id,
      };

      var res = await this.$API.system.table.infoNoCache.get(params);

      this.form = res.data;
      this.loading = false;
      var children = [];
      if (this.mode == "copy") {
        this.form.id = 0;
        this.form.buttons.map(v => {
          v.id = "id" + v.id;
          children = children.concat(v["children"]);
          delete v["children"];
          this.parentButtons.push(v);
          return v;
        });
        this.form.columns.map(v => {
          v.id = "id" + v.id;
          return v;
        });
        this.form.forms.map(v => {
          v.id = "id" + v.id;
          return v;
        });
        children.map(v => {
          v.id = "id" + v.id;
          v.parent_id = "id" + v.parent_id;
          return v;
        });
      } else {
        this.form.buttons.map(v => {
          children = children.concat(v["children"]);
          delete v["children"];
          this.parentButtons.push(v);
          return v;
        });
      }
      this.form.buttons = this.form.buttons.concat(children);
    },
  },
};
</script>

<style>
.el-table .cell,
.el-table--small .el-table__cell,
.el-table .el-input__inner {
  padding: 0px;
}
</style>
